<script setup>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { ref, onMounted } from 'vue'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'


echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout, GridComponent, BarChart, CanvasRenderer
])

//日期选择器


const dateArray = ref('')


let barChart = ref(null)
let pieChart = ref(null)
onMounted(() => {
  initbarChart()
  initpieChart()
})

//柱状图
const initbarChart = () => {
  let myChart = echarts.init(barChart.value)
  let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)
}

//饼图
const initpieChart = () => {
  let myChart = echarts.init(pieChart.value)
  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '成功日志' },
          { value: 735, name: '失败日志' }

        ]
      }
    ]
  }

  option && myChart.setOption(option)
}
</script>

<template>
  <div class='top'>
    <div class='total'>
      <el-icon class='tb'>
        <Coin />
      </el-icon>
      <div class='data'>
        <p>当日总日志条数量</p>
        <p>1235</p>
      </div>
    </div>
    <div class='total'>
      <el-icon class='tb'>
        <Coin />
      </el-icon>
      <div class='data'>
        <p>当日成功日志数量</p>
        <p>1235</p>
      </div>
    </div>
    <div class='total'>
      <el-icon class='tb'>
        <Coin />
      </el-icon>
      <div class='data'>
        <p>当日失败日志数量</p>
        <p>1235</p>
      </div>
    </div>

  </div>

  <div class='under'>
    <!--    日期选择器-->

    <div class='startAndEndTime'>
      <div class='rzbb'>
        日志报表
      </div>
      <div class='block'>
        <el-date-picker
          v-model='dateArray'
          type='daterange'
          range-separator='至'
          start-placeholder='开始时间'
          end-placeholder='结束时间'
          size='default'
        />
      </div>
    </div>
    <!--  柱状图 7天数据-->
    <div class='box' ref='barChart'></div>
    <!--  饼图-->
    <div class='box' ref='pieChart'></div>
  </div>


</template>


<style scoped>
.top {
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;

  .total {
    margin-top: 20px;
    height: 110px;
    width: 300px;
    border-radius: 30px;
    border: 2px solid #252a2f;
    display: flex;

    .tb {
      height: 110px;
      width: 120px;
      line-height: 50px;
      font-size: 50px;
      color: #102783;
    }

    .data {
      padding-top: 23px;
      width: 180px;
      height: 110px;
      text-align: center;

      p:nth-child(1) {
        font-size: 13px;
        color: #050505;
      }

      p:nth-child(2) {
        font-size: 28px;
        color: #020202;
        font-weight: 700;
      }
    }
  }
}



.under {


  margin-top: 20px;
  border: 2px solid #252a2f;
  border-radius: 30px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .startAndEndTime {
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    justify-content: space-between;
    display: flex;
    height: 30px;
    width: 100%;
    .rzbb {
      line-height: 30px;
    }
  }

  .box {
    margin-top: 20px;
    width: 600px;
    height: 300px;
  }
}


</style>
